<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/user-circle.png"></image>
		</view>

		<view class="form">
			<u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

				<u-form-item label="手机" prop="mobile" borderBottom>
					<u--input type="text" v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item label="密码" prop="password" borderBottom>
					<u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>

				<view style="margin-top: 25px;">
					<u-button type="warning" @click="onSubmit">绑定</u-button>
				</view>
			</u--form>
		</view>

		<view class="agreement">
			<u-checkbox-group v-model="agreementStatus">
				<u-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
				<navigator class="url" url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
			</u-checkbox-group>
		</view>

		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			openid: '',
			business: {
				mobile: '',
				password: ''
			},

			// 验证规则
			rules: {
				mobile: [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						if (value) {
							return uni.$u.test.mobile(value);
						} else {
							return false;
						}
					},
					type: 'string',
					required: true,
					message: '手机号码不正确',
					// 触发器可以同时用blur和c hange
					trigger: ['change', 'blur'],
				}],
				'password': {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur', 'change']
				},
			},
			agreementStatus: false,
		}
	},
	// uniApp 生命周期 => 应用生命周期 页面生命周期
	onLoad(options) {
		// 页面的生命周期 => 页面加载所触发，可以接收从上一个页面传递过来的参数

		// 赋值
		this.openid = options.openid ?? '';
		// console.log(options);
	},
	onReady() {
		//onReady 为uni-app支持的生命周期之一,页面初始化的时候
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		onSubmit() {
			// 是否同意协议
			if (!this.agreementStatus) {
				this.$refs.uToast.show({
					type: 'error',
					message: '请先同意用户服务协议'
				})

				return false;
			}

			// 表单验证
			this.$refs.uForm.validate().then(async () => {
				let params = {
					mobile: this.business.mobile.trim(),
					password: this.business.password.trim(),
					openid: this.openid
				}

				let result = await uni.$u.http.post('/business/bind', params);

				if (result.code === 1) {
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							uni.navigateTo({                       //跳转页面
								url: '/pages/business/index'
							})
						}
					})

					return false;
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg,
					})

					return false;
				}
			}).catch((err) => {
				console.log(err);
			});


		}
	},
}
</script>

<style>
page {
	background-color: #f8fafe;
}

.container .avatar {
	text-align: center;
	background-color: #fff;
	padding-bottom: 20px;
}

.avatar image {
	width: 80px;
	height: 80px;
	margin: 50px 0 20px;
}

.form {
	margin: 0 50rpx;
	box-sizing: border-box;
}

.btn {
	margin-top: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* #ifdef H5 || APP-PLUS */
.u-icon {
	margin-left: 10px;
}

/* #endif */

.agreement {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	font-size: 14px;
}

navigator {
	color: #33ccff;
}
</style>